<template>
  <div class="header_main">
    <div class="top wow fadeInDown">
      <div class="top_box">
        <div class="logn" @click="$router.push('/')">
          <img
            src="http://175.178.92.128:8087/campus_help_system/images/logo/logo.png"
            height="100%"
            alt=""
          />
          <span> 快捷校园在线互助系统 </span>
        </div>

        <div class="user_sta">
          <div class="signin" v-if="user.id == null || user.id == ''">
            <span @click="$router.push('/login?state=1')">登录</span>
            <span @click="$router.push('/login?state=0')">注册</span>
          </div>
          <div class="login" v-else>
            <el-dropdown trigger="click" @command="handleCommand">
              <span class="el-dropdown-link">
                <img :src="$store.state.imageTab" alt="" width="50" />
                <i class="el-icon-arrow-down el-icon--right"></i>
              </span>
              <el-dropdown-menu slot="dropdown">
                <el-dropdown-item command="1">留言记录</el-dropdown-item>
                <el-dropdown-item command="2">互助物品</el-dropdown-item>
                <el-dropdown-item command="3">失物招领</el-dropdown-item>
                <el-dropdown-item command="4">资源共享</el-dropdown-item>
                <el-dropdown-item command="5">帮啦信息</el-dropdown-item>
                <!-- <el-dropdown-item command="7" v-if="isShow"
                  >后台管理</el-dropdown-item
                > -->
                <el-dropdown-item command="6">退出</el-dropdown-item>
              </el-dropdown-menu>
            </el-dropdown>
          </div>
        </div>
      </div>
    </div>
    <div class="bottom">
      <div class="bottom_main">
        <ul class="bottom_box">
          <li
            class="wow slideInLeft"
            data-wow-offset="300"
            :data-wow-delay="i * 0.1 + 0.1 + 's'"
            v-for="(e, i) in urlArr"
            :key="i"
            @click="clickUrl(e)"
            :class="e.name == $route.name ? 'is_bor' : ''"
          >
            <span> {{ e.name }} </span>
            <i class="line"></i>
          </li>
        </ul>
        <div class="user" @click="clickPersonal">
          <i class="el-icon-s-home"></i>
          个人中心
        </div>
      </div>
    </div>
  </div>
</template>

<script>
// 头部组件
export default {
  data() {
    return {
      urlArr: [
        { name: "首页", url: "/home" },
        { name: "校园资讯", url: "/campus_information" },
        { name: "资源共享", url: "/resource_sharing" },
        { name: "互助物品", url: "/mutual_aid" },
        { name: "失物招领", url: "/lost_and_found" },
        { name: "帮啦任务发布", url: "/task_publishing" },
        { name: "后台管理", url: "/admin" },
      ],
      user: {
        id: "",
        userNo: "",
        userName: "",
        role: "",
        created_at: "",
        professional: "",
        classes: "",
        telephone: "",
        password: "",
        images: "",
        isShow: false,
      },
    };
  },
  created() {
    if (window.localStorage.getItem("role") == "管理员") {
      this.isShow = true;
    } else {
      this.isShow = false;
    }
    this.isLogin();
  },
  mounted() {},
  methods: {
    // 点击tab栏
    clickUrl(e) {
      this.$router.push(e.url);
    },
    // 点击个人中心
    clickPersonal() {
      if (
        window.localStorage.getItem("id") == "" ||
        window.localStorage.getItem("id") == null
      ) {
        return this.$message.error("请先登录");
      }
      this.$router.push("/individual_center");
    },
    // 判断是否登录
    isLogin() {
      this.user.id = window.localStorage.getItem("id");
      this.user.userNo = window.localStorage.getItem("userNo");
      this.user.userName = window.localStorage.getItem("userName");
      this.user.role = window.localStorage.getItem("role");
      this.user.created_at = window.localStorage.getItem("created_at");
      this.user.professional = window.localStorage.getItem("professional");
      this.user.classes = window.localStorage.getItem("classes");
      this.user.telephone = window.localStorage.getItem("telephone");
      this.user.password = window.localStorage.getItem("password");
      this.user.images = window.localStorage.getItem("images");
      this.$store.commit("getImageTab", window.localStorage.getItem("images"));
    },
    // 点击头像下拉菜单
    handleCommand(e) {
      if (e != 6) {
        let index = e - 1;
        this.$router.push("/individual_center/?index=" + index);
      }

      if (e == 7) {
        this.$router.push("/admin");
      }
      if (e == 6) {
        console.log(e, 6);
        window.localStorage.removeItem("id");
        window.localStorage.removeItem("userNo");
        window.localStorage.removeItem("userName");
        window.localStorage.removeItem("role");
        window.localStorage.removeItem("created_at");
        window.localStorage.removeItem("professional");
        window.localStorage.removeItem("classes");
        window.localStorage.removeItem("telephone");
        window.localStorage.removeItem("password");
        window.localStorage.removeItem("images");
        this.isLogin();
        this.$router.push("/");
        this.$message.error("退出登录");
      }
    },
  },
};
</script>

<style lang="less" scoped>
.header_main {
  height: 100%;
  .top {
    height: calc(100% - 54px);
    border-bottom: 1px solid #d3d3d3;

    .top_box {
      height: 100%;
      width: 1200px;
      margin: 0 auto;
      display: flex;
      align-items: center;
      justify-content: space-between;
      .logn {
        display: flex;
        align-items: center;
        height: 100%;
        span {
          font-size: 34px;
          margin-left: 24px;
          color: #0166b6;
        }
      }

      .user_sta {
        display: flex;
        align-items: center;

        .signin {
          span {
            margin-left: 12px;
            color: #0166b6;
            line-height: 1;
            border-bottom: 1px solid #0166b6;
            cursor: pointer;
          }
        }
        .login {
          cursor: pointer;
          .el-dropdown-link {
            display: flex;
            align-items: center;
          }
        }
      }
    }
  }
  .bottom {
    background-color: #0166b6;
    height: 54px;
    .bottom_main {
      height: 100%;
      width: 1200px;
      margin: 0 auto;
      display: flex;
      justify-content: space-between;
      align-items: center;
      .bottom_box {
        height: 100%;
        width: 1000px;
        display: flex;
        align-items: center;
        & > li {
          flex: 1;
          height: 100%;
          display: flex;
          align-items: center;
          justify-content: center;
          cursor: pointer;
          margin: 0 12px;
          color: #fff;
          position: relative;
          span {
            cursor: pointer;
            color: #fff;
          }
          .line {
            position: absolute;
            height: 4px;
            background-color: #ff9200;
            width: 0;
            bottom: 0;
            left: 50%;
            transition: 0.2s all linear;
          }
        }
        & > li:hover {
          .line {
            width: 100%;
            left: 0;
            transition-delay: 0.1s;
          }
          span {
            color: #ff9200;
          }
        }
        .is_bor {
          // border-bottom: 2px solid #ff9200;
          .line {
            width: 100%;
            left: 0;
            transition-delay: 0.1s;
          }
          span {
            color: #ff9200;
          }
        }
      }
      .user {
        display: flex;
        align-items: center;
        i {
          color: #ff9200;
          font-size: 24px;
          padding-bottom: 5px;
          margin-right: 5px;
        }
        color: #ff9200;
        font-size: 18px;
        font-weight: 700;
        cursor: pointer;
      }
    }
  }
}
</style>
